/*
 * @Description: 提示框
 * @Author: kanglin
 * @Date: 2018-08-30 10:17:12
 * @Copyright: Created by Panxsoft.
 */

<style lang="less" scoped rel="stylesheet/less" type="text/less" >
	@import '~src/assets/css/common.less';
	.v-com-alert{
		.mask{
			position: fixed;
			width: 100%;
			top: 0;
			bottom: 0;
			background: rgba(0, 0, 0, .3);
		}
		.alert{
			position: fixed;
			width: 400* @rem-per-px;
			background: #ffffff;
			border-radius: 24 * @rem-per-px;
			left: 50%;
			margin-left: -200* @rem-per-px;
			top: 50%;
			transform: translateY(-50%);
		}

		.alert__header{
			height: 76 * @rem-per-px;
			line-height: 76* @rem-per-px;
			font-size: 20* @rem-per-px;
			text-align: center;
		}

		.alert__header__close{
			// margin:0 380 * @rem-per-px;
			position: absolute;
			width: 18 * @rem-per-px;
			height: 18 * @rem-per-px;
			background: #888888;
			top: 20* @rem-per-px;
			right: 20* @rem-per-px;
		}

		.alert__body{
			margin: 20 * @rem-per-px 20 * @rem-per-px 40* @rem-per-px;
			color: #666666;
			line-height: 1.6;
			max-height: 180*@rem-per-px;
			overflow-y: auto;
		}

		.alert__footer{
			height: 70* @rem-per-px;
			text-align: center;
		}

		.alert__footer__button-left,
		.alert__footer__button-right{
			display: inline-block;
			width: 136* @rem-per-px;
			height: 38* @rem-per-px;
			border: 1px solid #c794fc;
			color: #c794fc;
			border-radius: 20* @rem-per-px;
			line-height: 38* @rem-per-px;
			text-align: center;
			margin: 0 12* @rem-per-px;
		}

		.alert__footer__button-left.active,
		.alert__footer__button-right.active,
		.alert__footer__button-left:hover,
		.alert__footer__button-right:hover{
			background: #c794fc;
			color: #ffffff;
		}


		/** 动画 **/
		@keyframes fade-in{
			from {
				opacity: 0;
			}

			to {
				opacity: 1;
			}
		}

		@keyframes fade-out{
			from {
				opacity: 1;
			}

			to {
				opacity: 0;
			}
		}

		.fade-enter-active{
			animation-name: fade-in;
            animation-duration: 800ms;
		}

		.fade-leave-active{
			animation-name: fade-out;
            animation-duration: 800ms;
		}

		.fold-enter-active {
            animation-name: fold-in;
            animation-duration: .2s;
        }
        .fold-leave-active {
            animation-name: fold-out;
            animation-duration: .2s;
        }
        @keyframes fold-in {
            0% {
                transform: translateY(50%);
                opacity: 0;
            }
            100% {
                transform: translateY(-50%);
                opacity: 1;
            }
        }
        @keyframes fold-out {
            0% {
                transform: translateY(-50%);
                opacity: 1;
            }
            100% {
                transform: translateY(50%);
                opacity: 0;
            }
        }
	}

</style>

<template>
	<div
		v-if="!is_destroy"
		class="v-com-alert m-alert">
		<transition name="fade">
			<div
				v-if="is_visible"
				class="mask"
				@click="close"/>
		</transition>
		<transition
			name="fold"
			@after-leave="handleLeave">
			<div
				v-if="is_visible"
				class="alert">
				<div class="alert__header">
					{{ title }}
					<i
						class="alert__header__close"
						@click="close"/>
				</div>
				<div
					:style="{textAlign: align}"
					class="alert__body"
				>
					{{ content }}
				</div>
				<div class="alert__footer">
					<span
						class="alert__footer__button-left"
						@click="handleCancel">
						{{ cancelText }}
					</span>
					<span
						class="alert__footer__button-right active"
						@click="handleOk">
						{{ okText }}
					</span>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
export default {
	name: 'MDialog',
	props: {
		title: {
			type: String,
			default() {
				return '提示';
			},
		},
		content: {
			type: String,
			required: true,
		},
		cancelText: {
			type: String,
			default() {
				return '取消';
			},
		},
		okText: {
			type: String,
			default() {
				return '确认';
			},
		},
		align: {
			type: String,
			default() {
				return 'left'; // 文字对齐方式 left | center | right
			},
		},
		visible: {
			type: Boolean,
			default() {
				return true;
			},
		},
		single: { // 单例
			type: Boolean,
			default() {
				return false;
			},
		},
		ok: {
			type: Function,
			default() {
				return () => {};
			},
		},
		cancel: {
			type: Function,
			default() {
				return () => {};
			},
		},

	},
	data() {
		return {
			is_visible: false,
			is_destroy: false,
		};
	},
	watch: {
		visible(status) {
			this.is_visible = status;
		},
	},
	created() {
		this.is_visible = this.visible;
	},

	methods: {
		close() {
			// this.$emit('update:visible', false);
			this.is_visible = false;
		},

		handleOk() {
			this.close();
			this.$emit('on-ok');
			this.ok(this);
		},

		handleCancel() {
			this.close();
			this.$emit('on-cancel');
			this.cancel.call(this);
		},
		handleLeave() {
			if (!this.single) {
				this.is_destroy = true;
			}
		},

	},
};
</script>

<style scoped>

</style>
